<template>
  <div>
    <!-- 准入基本信息 -->
    <basic-container>
      <avue-form v-loading="loading" ref="form" :option="option" v-model="form">
        <template slot="supplierName">
          <el-input
            class="pointer"
            v-model="form.supplierName"
            @focus="openSupplier"
            placeholder="请选择供应商名称"
            readonly
          >
            <i slot="suffix" class="el-icon-search"></i>
          </el-input>
        </template>
      </avue-form>
    </basic-container>
    <!-- 评分信息、供货能力清单、附件信息 -->
    <basic-container>
      <el-tabs v-model="activeName">
        <el-tab-pane v-for="(row, index) in optionList" :key="index" :label="row.label" :name="row.name" />
      </el-tabs>
      <component :ref="activeName" :is="require(`@/views/tenant/supplier/access/components/${activeName}`).default" />
    </basic-container>
  </div>
</template>

<script>
import { option, supplierOption } from '@/option/tenant/supplier/access-form'
import { setStore } from '@/util/store'
export default {
  inject: ['type'],
  name: 'AccessOperation',
  data() {
    return {
      form: {},
      loading: false,
      option: option.call(this),
      activeName: 'score-info',
      optionList: [
        { label: '评分信息', name: 'score-info' },
        { label: '供货能力清单', name: 'supply-capacity-list' },
        { label: '附件信息', name: 'attachment-info' }
      ]
    }
  },
  methods: {
    openSupplier() {
      this.$quickModal({
        title: '选择供应商',
        width: '900px',
        componentIsTag: true,
        component: 'suppliers',
        props: {
          multiple: false,
          columns: supplierOption
        },
        on: {
          change: row => {
            console.log(row)
            this.form.supplierName = row.supplierName
            // this.getDetailAll(row.id)
            setStore({
              name: 'supplierId',
              content: row.id,
              type: 'session'
            })
          }
        }
      })
    }
  }
}
</script>

<style></style>
